<template>
  <div class="main">
    <slot></slot>
    <div class="i-ruler" :style="rulerAni"></div>
    <div class="i-stamp" :style="stampAni"></div>
    <div class="i-bg-book" :style="bookAni"></div>
    <div class="i-bg-photo" :style="photoAni"></div>
    <div class="i-plant-note" :style="noteAni"></div>
    <div class="i-pen" :style="penAni"></div>
  </div>
</template>

<script>
export default {
  props: {
    alternate: Boolean
  },
  computed: {
    rulerAni() {
      return this.alternate ? this.animation('outLeft', 1, 0.6, 0) : {}
    },
    stampAni() {
      return this.alternate ? this.animation('outLeft', 1, 0.6, 0.6) : this.animation('inLeft', 1, 1.5, 1.8)
    },
    markAni() {
      return this.alternate ? this.animation('fadeOut', 1, 0.6, 0.6) : this.animation('fadeIn', 1, 1.5, 1.8)
    },
    bookAni() {
      return this.alternate ? this.animation('outDown', 1, 0.8, 0.6) : this.animation('inDown', 1, 1.5, 1.8)
    },
    photoAni() {
      return this.alternate ? this.animation('outDown', 1, 0.8, 0.6) : this.animation('inDown', 1, 1.5, 1.8)
    },
    noteAni() {
      return this.alternate ? this.animation('outRight', 1, 0.6, 0) : {}
    },
    penAni() {
      return this.alternate ? this.animation('fadeOut', 1, 0.6, 0) : this.animation('fadeIn', 1, 1.5, 3.5)
    }
  }
}
</script>

<style scoped>
.main {
  position: absolute;
  width: 100%;
  height: 100%;
}
.i-bg-mark {
  position: absolute;
  bottom: 0.7rem;
  left: 2.66rem;
  background: url('../assets/mark.png') no-repeat;
  background-size: 100% 100%;
  width: 0.65rem;
  height: 0.99rem;
}
.i-ruler {
  position: absolute;
  left: 0;
  background: url('../assets/bg_rular.png') no-repeat;
  width: 4.91rem;
  height: 3.15rem;
  background-size: 100% 100%;
  top: 0.25rem;
  pointer-events: none;
}
.i-stamp {
  position: absolute;
  top: 50%;
  transform: translate(0, 1.5rem);
  background: url('../assets/bg_stamp.png') no-repeat;
  background-size: 100% 100%;
  width: 1.91rem;
  height: 1.88rem;
}
.i-bg-book {
  position: absolute;
  bottom: 0;
  left: 0;
  background: url('../assets/bg_book.png') no-repeat;
  background-size: 100% 100%;
  width: 4.46rem;
  height: 3.17rem;
}
.i-bg-photo {
  position: absolute;
  bottom: 0;
  right: 0;
  background: url('../assets/bg_photo.png') no-repeat;
  background-size: 100% 100%;
  width: 2.08rem;
  height: 1.24rem;
}
.i-plant-note {
  position: absolute;
  top: 0;
  right: 0;
  background: url('../assets/plant_note.png') no-repeat;
  background-size: 100% 100%;
  width: 2.44rem;
  height: 6.24rem;
}
.i-pen {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0, -60%);
  background: url('../assets/bg_paint.png') no-repeat;
  background-size: 100% 100%;
  width: 6.22rem;
  height: 9.05rem;
  touch-action: none;
  pointer-events: none;
}
</style>
